$core-progress-bar-height: 8px !default;

ion-app.app-root core-progress-bar {
    @include padding(null, 55px, null, null);
    position: relative;
    display: block;
    @extend .clearfix;

    .core-progress-text {
        @include margin(null, null, null, 10px);
        line-height: 40px;
        font-size: 1.4rem;
        color: $gray-darker;
        @include position(-16px, 10px, null, null);
        position: absolute;

        @include darkmode() {
            color: $gray-lighter;
        }
    }

    progress {
        -webkit-appearance: none;
        appearance: none;
        height: $core-progress-bar-height;
        margin: 16px 0;
        padding: 0;
        display: block;
        width: 100%;

        .progress-bar-fallback,
        &[value]::-webkit-progress-bar {
            background-color: $gray-lighter;
            border-radius: 0;
            border:0;
            box-shadow: none;
        }

        .progress-bar-fallback span,
        &[value]::-webkit-progress-value {
            background-color: $core-progressbar-color;
            @include darkmode() {
                background-color: $core-progressbar-color;
            }
            border-radius: 0;
        }

        .progress-bar-fallback {
            width: 100%;
            height: $core-progress-bar-height;
            display: block;
            position: relative;

            span {
                height: $core-progress-bar-height;
                display: block;
            }
        }
    }
}
